import React from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { 
  AppOutline, 
  MessageOutline, 
  UserOutline 
} from 'antd-mobile-icons'
import styles from './index.module.css'

interface TabItem {
  key: string
  label: string
  icon: React.ReactNode
  path: string
}

const TabBar: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const tabs: TabItem[] = [
    {
      key: 'home',
      label: '诊疗首页',
      icon: <AppOutline />,
      path: '/home'
    },
    {
      key: 'website',
      label: '微官网',
      icon: <AppOutline />,
      path: '/website'
    },
    {
      key: 'message',
      label: '消息中心',
      icon: <MessageOutline />,
      path: '/message'
    },
    {
      key: 'profile',
      label: '我的',
      icon: <UserOutline />,
      path: '/profile'
    }
  ]

  const handleTabClick = (path: string) => {
    navigate(path)
  }

  return (
    <nav className={styles.tabBar}>
      {tabs.map((tab) => {
        const isActive = location.pathname === tab.path
        return (
          <button
            key={tab.key}
            className={`${styles.tabItem} ${isActive ? styles.active : ''}`}
            onClick={() => handleTabClick(tab.path)}
          >
            <div className={styles.tabIcon}>{tab.icon}</div>
            <span className={styles.tabLabel}>{tab.label}</span>
          </button>
        )
      })}
    </nav>
  )
}

export default TabBar
